Reprenant la dernière leçon, nous sommes maintenant en mesure d'ouvrir des éléments pour les lire et de les fermer, mais comme indiqué,
nous souhaitons ajouter la possibilité non seulement de fermer un élément, mais également de le supprimer en même temps.
En partant de la lecture du script en cours d'évaluation dans notre contenu d'élément distant, nous pouvons ajouter le bouton pour marquer
un élément comme terminé.
Un signe l'élément Neubauten à une variable de redit se ferme, le crée avec le document, crée un aliment, fait
du bouton un simple div.
Avec une étiquette de done impliquant que nous avons fini avec un élément et il peut également être supprimé à certains styles pour que
ce développement ressemble à un bouton.
Réglage de sa position sur fixe.
Copiez la propriété de style.
Bas à 15 pixels, donc 15 pixels à partir du bas du conteneur parent étant la balise body, une fois que nous y ajoutons cet
élément, mêmes 15 pixels à partir de la droite, un peu de remplissage, cinq pixels en haut et en bas et 10 pixels à gauche et à droite, la
taille de la police peut être de 20 pixels, il est important de conserver cette taille de police en tant que taille absolue et non en
tant que valeur relative ou en pourcentage car cela variera alors en fonction du contenu distant, de la taille
de la police, quelque chose à garder à l'esprit lorsque nous ajoutons ce bouton à un poids
de police d'environnement essentiellement inconnu en gras.
Avec un fond de bouton bleu Dodger.
Texte blanc sur ce bouton bleu.
Un léger rayon vers les coins inférieurs, cinq pixels font que le curseur affiche une flèche lorsqu'il survole
le bouton avec le curseur par défaut et enfin, séparez le bouton du contenu derrière lui en appliquant
une légère ombre aux pixels de deux pixels avec un flou de deux pixels et un noir très transparent à deux pour
cent opaque.
C'est le style du bouton.
Ainsi, comme mentionné, ajoutez ceci à l'élément de corps de contenu distant.
N'oubliez pas que ce script est exécuté dans la portée du contenu distant, donc sélectionnez
l'élément body comme vous le feriez normalement avec les éléments aget de document par le nom de la balise body accédant au
premier élément car il ne peut y avoir qu'une seule balise body append child redit fermer ce bouton de développement tester.
Cela fonctionne et semble juste.
Ouvrez un élément pour que le script l'injecte et le bouton est ajouté, bien qu'il soit derrière ce contenu,
que nous pouvons corriger avec un index Z en une seconde, mais plus important encore, sur les outils de développement, nous avons
cette erreur avec la partie importante étant cette ligne ici, un objet ne pouvait pas être cloné.
Maintenant, entrer dans les détails sur ce qui se passe exactement ici pourrait prendre un peu de temps.
Mais c'est essentiellement le résultat de la communication IPC interne qui se produit lorsque cette fenêtre de
navigateur proxy est créée.
Nous voyons ici l'invocation interne d'IPSI Renderer cette même méthode d'invocation que nous avons vue lors de la couverture de l'IPSI dans une leçon
précédente.
Et la simple raison pour laquelle un élément n'a pas pu être cloné est que IPSI ne peut transférer ou cloner que des objets
JavaScript ordinaires, des choses qui peuvent être sérialisées.
Et dans notre lecteur, le fichier le plus douteux append child renvoie en fait un objet JavaScript non standard, un
objet nœud HTML dom pour être exact, quelque chose qui ne peut pas être sérialisé.
Donc, la raison pour laquelle j'ai choisi d'utiliser ceci alors est comme il sera, la solution la plus évidente pour ce que nous
essayons de faire ici.
Et de temps en temps, vous rencontrerez de petites erreurs comme celle-ci simplement à cause de la façon dont l'électron
gère la communication interne.
Si vous souhaitez comprendre un peu mieux les aspects techniques de cela, j'ai lié à une documentation
expliquant cela.
Mais pour nos besoins, nous pouvons faire l'une des quelques autres options.
Nous pouvons soit ajouter ce nouvel élément de bouton sous forme de chaîne aux corps de notre HTML, soit la
meilleure alternative utiliser la nouvelle méthode append comme celle-ci.
Append, contrairement à un enfant, ne crée pas d'objet de note HTML, il résout donc le problème de sérialisation interne du
GIEC.
Et avant de tester cela à nouveau, nous pouvons également donner à cet élément de bouton un indice Z de neuf neuf neuf neuf
juste pour le forcer à l'avant de ce contenu distant en toute sécurité et réessayer.
Ouvrez l'élément.
Et là, cela fonctionne maintenant, donc encore une fois, bien que cela puisse sembler un problème étrange, ce qui est probablement le cas,
je voulais juste particulièrement le montrer afin que vous soyez conscient des petites solutions de contournement internes qui
pourraient être nécessaires de temps en temps, retour là où nous étions.
Nous avons maintenant ce bouton dans le contenu distant, mais il ne fait rien.
Alors allons-y et attachez un écouteur de clic à cela.
Cette fois en utilisant l'attribut element unclick.
Égale à une fonction avec l'événement de clic dans lequel affichera simplement une alerte pour l'instant terminé avec item safe à
tester à nouveau.
Ouvrez un élément comme avant, auquel le bouton est ajouté un instant plus tard, cliquez et la lunette arrière affiche cette
alerte.
Donc, notre bouton est maintenant connecté, ce qui signifie que la prochaine étape est de communiquer avec la fenêtre principale.
Gardez à l'esprit que nous n'avons pas accès à la messagerie IPSI ou au contexte de la fenêtre principale depuis la
fenêtre du lecteur.
Nous pouvons donc utiliser l'API de messagerie HTML5 à la place.
Cette API nous permet d'envoyer un message à n'importe quelle instance de fenêtre, ce qui signifie que tant que nous pouvons obtenir une référence
à la fenêtre principale, nous pouvons lui envoyer un message en toute sécurité.
Et avec cette fenêtre de lecteur étant une fenêtre de navigateur proxy, Electron nous fournit une
référence à la fenêtre responsable de son ouverture, en accédant sur la fenêtre à l'ouvreur de propriété ouvreur étant une référence sûre à la
fenêtre principale.
Envoyez un message à cette fenêtre principale avec un message postal.
Avec un message d'Eitam envoyé à n'importe quelle origine cible indiquée par l'astérisque, nous devrons écouter ce message dans la
fenêtre principale ou les éléments stogies comme requis par la fenêtre principale.
En haut ici, écoutez Dunn, message de la fenêtre du lecteur.
Écoute sur l'objet fenêtre avec l'événement publicitaire standard, écouteur pour message.
Lors d'un rappel sur cet écouteur de message dans lequel nous pouvons déconnecter les données du message en
y accédant sur l'objet événement e data.
Enregistrez les deux fichiers.
Ouvrez un élément.
Je vais déplacer cette fenêtre du lecteur afin que nous puissions observer le clic de la console principale de Windows et nous voyons
le message envoyé depuis la fenêtre du lecteur dans notre élément de la fenêtre principale.
OK, alors maintenant en mesure de dire à notre application que nous en avons terminé avec l'élément, ajoutons le code pour
supprimer un élément à un certain index.
N'oubliez pas que la fenêtre principale n'a aucun moyen de savoir à quel élément ce message fait référence.
Donc, avec le message, nous devrons le dire.
Et le moyen le plus simple de le faire est de lui donner l'index des éléments.
Cela dit, la fenêtre du lecteur elle-même ne sait pas à quel élément elle traite pour le moment.
La fenêtre du lecteur est simplement créée pour charger une URL donnée, nous devrons donc injecter l'index de l'élément
avec ce code de bouton, la première étape étant d'obtenir l'index réel d'un élément.
Je vais créer une nouvelle fonction pour cette exportation obtenir l'élément sélectionné étant que lorsqu'un élément est ouvert, cet élément
est également sélectionné.
Comme précédemment, récupérez ce nœud sélectionné.
Laissez l'élément actuel égal au document, obtenez les éléments par nom de classe.
Lire les éléments sélectionnés.
Item un ou index zéro, puis à l'aide d'une simple boucle, nous pouvons déterminer l'index de l'élément sélectionné dans
son conteneur parent.
Commencez par régler l'index de l'élément à zéro.
Ajouter un enfant égal à l'élément actuel.
La boucle en vaut la peine.
L'élément enfant est égal au frère précédent de lui-même, donc en essayant de définir cette variable enfant sur son
propre frère précédent, et s'il n'est pas égal à null, ce qui signifie qu'un frère précédent existe, incrémentez l'index de
l'élément de un.
Cela peut sembler un peu étrange, mais c'est assez simple.
Par exemple, si l'élément sélectionné, cet élément actuel est le premier élément, il n'aura pas de frère précédent
définissant l'enfant sur null lors de la première itération de boucle, ce qui laissera l'index de l'élément à zéro ou à
la position un.
Si, cependant, avait eu un frère précédent, il incrémenterait une fois et serait à l'index un et ainsi de suite.
Après avoir indexé les éléments sélectionnés, nous pouvons enfin renvoyer à la fois l'index de l'élément et le nœud d'élément
sélectionné en tant qu'objet.
Renvoie un objet avec un nœud de clé égal à l'élément sélectionné et un index de clé égal à l'index de l'élément.
La valeur que nous avons calculée ici.
Nous pouvons également maintenant utiliser cette fonction à la place de toutes les références à l'élément actuellement sélectionné, juste pour nettoyer
un peu les choses.
Copie.
Première élection ici, où nous supprimons simplement les éléments, la classe sélectionnée, remplaçons le sélecteur par ce
chien, obtenons le nœud de chien de l'élément sélectionné étant l'élément sélectionné juste un peu plus propre, nous en avons quelques autres.
Donc, Kopi, cette année dans la fonction d'élection de changement, définir l'élément actuel sur ce chien obtient l'élément sélectionné
en accédant au nœud de point de l'élément actuel de la fonction.
Idem dans notre fonction ouverte.
Élément sélectionné.
Élément sélectionné A ..
Et c'est tout.
OK, de retour dans le message, l'auditeur ayant maintenant un moyen d'accéder à l'index d'un élément, on peut appeler
dans cette fonction, ce point supprime une fonction.
Nous devons encore créer le passage dans l'index des éléments Windows du lecteur à partir du message.
Encore une fois, quelque chose que nous devons encore ajouter.
Je vais dire e dot data item index, copiez ce nom de propriété afin que nous puissions le définir sur notre message.
Ce message, bien sûr, venant de ce lecteur est tellement de retour au script du lecteur.
Faites de ce message un objet au lieu de la simple chaîne avec un élément de lecture de suppression de propriété d'action, il s'agit
simplement d'un moyen simple d'identifier le message dans les éléments esquive alors que nous écoutons tous les messages et
l'index de l'élément, ce que nous ne faisons bien sûr pas pas dans le script.
Nous devrons donc le définir dynamiquement.
Je vais en faire une balise unique que nous pouvons remplacer par l'index de l'article, doubler l'index de Brackett, puis revenir dans
les frais d'articles lors de l'ouverture d'un article.
Ce lecteur Jayesh Content contiendra désormais cette balise d'index.
Ainsi, avoir accès à l'index de l'élément sélectionné ici remplace simplement cette balise dans le lecteur en faisant un geste avec
l'index de l'élément.
En appelant Rita James, remplacez la chaîne JavaScript standard, remplacez la fonction double index de Brackett,
cette balise, nous l'ajoutons simplement avec l'index des éléments sélectionnés ou l'élément en cours d'ouverture de l'élément sélectionné
index DOT.
Alors maintenant, en cliquant, le bouton Terminé recevra un objet envoyé via l'événement de message avec l'index de l'élément à
supprimer.
Nous pouvons tester cela dans le rappel de message, remplacer temporairement cet appel à supprimer car cela n'existe pas
encore avec les données de point log e de console.
Cet objet de message que nous envoyons à partir du contenu distant, enregistrez les deux fichiers, ouvrez le premier élément.
Donc, l'index zéro Ilagan redimensionne cela vers le bas afin que nous puissions voir le clic principal de la console Windows et là l'action
telle que nous l'avons définie et l'index de l'élément de zéro.
Essayez un élément à un index différent.
Je vais fermer ce ouvert.
Non juste cette fois.
Alors index.
Cliquez sur fait et encore une fois, cela fonctionne comme prévu, nous avons donc maintenant notre index Eitam, ce qui signifie que nous
pouvons fermer et supprimer un élément lors de la réception du message du Dunbarton dans les éléments dot annuler ce journal à nouveau, appeler
cette fonction de suppression, que nous peut maintenant mettre en œuvre.
Mais avant de le faire, assurons-nous également que cet événement de message est en fait le bon message, juste
par précaution.
Si l'action IDOT DataDot équivaut à supprimer l'élément du lecteur.
Appelez cette fonction de suppression avec l'index de l'élément.
Après quoi, l'élément a été supprimé, fermez la fenêtre du lecteur pour l'utilisateur.
Ceci, bien sûr, signifie à nouveau que nous avons besoin d'une référence à la fenêtre proxy ou à l'expéditeur
de ce message, à laquelle nous pouvons accéder sur l'événement de message en tant que source.
Je me déconnecte pour démontrer.
Sauver.
Ouvrez un élément.
Fait et là un proxy de fenêtre de navigateur, qui, si nous développons il contient la fenêtre de navigateur standard,
ferme la fonction.
Donc, pour fermer la fenêtre du lecteur après avoir supprimé l'élément, appelez chaque point source, fermez l'enregistrement et testez.
Je vais faire de l'électron cette fois.
Cliquez sur le bouton et la fenêtre est fermée, mais pas encore supprimée.
Alors ajoutons enfin cette fonction de suppression.
Maintenant, je vais à nouveau supprimer les commentaires, créer l'élément de suppression de fonction.
Exportez la piste avec un seul argument étant l'élément à supprimer l'index.
La première chose à faire est de supprimer l'élément du DOM.
En appelant le conteneur d'éléments aliment, remove child, cela prend la note de supprimer, donc récupérez tous les
éléments dans les éléments div avec des éléments, des notes enfants, des notes enfants, des retours, un tableau d'éléments ou d'éléments.
Donc item at index, item index, cet argument qui supprime visuellement l'article de notre application, mais il est toujours présent dans
le tableau de stockage.
Donc, pour le supprimer complètement, dites cet index d'élément d'épissure de stockage, un élément qui dit simplement coupé de ce tableau, un élément
commençant à cet index et enfin persistez le tableau de stockage pour enregistrer ces modifications.
Cette sauvegarde stockée.
C'est la suppression de l'élément terminée, mais lorsque nous supprimons cet élément, nous n'avons plus d'élément sélectionné, nous devrons donc en
sélectionner un autre.
La façon la plus logique de le faire est de sélectionner l'élément précédent dans la liste ou s'il
s'agissait du premier élément de la liste à supprimer, sélectionnez simplement l'élément maintenant en premier lieu.
Il est également possible que l'élément supprimé ait été le dernier élément, ce qui signifie qu'il n'y a
rien d'autre à sélectionner pour éviter cela.
Commencez par vérifier s'il nous reste des articles.
Si cette longueur de stockage, ce qui signifie que nous avons un ou plusieurs éléments dans la matrice de stockage, allez-y et sélectionnez un
nouvel élément en fonction de l'index de l'élément supprimé.
Laisser le nouvel index de l'élément sélectionné égal en utilisant un opérateur ternaire pour vérifier si nous avons supprimé le premier élément ou non,
si l'index de l'élément est égal à zéro, ce qui signifie que c'était le premier élément, a déclaré le nouvel index
de l'élément sélectionné, à être maintenant zéro ainsi que nous voulez sélectionner l'élément maintenant en haut, autrement, ce qui signifie
que nous avons un ou plusieurs éléments avant l'élément maintenant supprimé, a déclaré le nouvel index de l'élément sélectionné à l'index de l'élément moins
un.
Sélectionnez l'élément à ce nouvel index.
Premièrement, obtenir tous les éléments lus avec le document, obtenir les éléments par classe, nommer les éléments lus assis
sur l'élément au nouvel index d'élément sélectionné avec l'ajout de points de liste de classes sélectionné.
Cela devrait tout sauver.
Ouvrez un élément électronique.
Je vais déplacer ceci vers la droite cette fois afin que nous puissions voir les éléments lorsque je clique sur Terminé.
Click and go, cet élément électronique est supprimé à la fois de l'interface de l'application et du stockage, l'élément
précédent étant automatiquement sélectionné, ce qui complète toute la logique de l'élément de l'application.
Donc, dans la prochaine leçon, nous finalisons cette application en ajoutant des menus système et des raccourcis clavier.